<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加老师信息</title>
<link rel="stylesheet" href="../../../css/radio/style.css">

<link rel="stylesheet" href="../../../css/Semantic/semantic.min.css" />
<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script src="../../../layui/layui.js"></script>
<script src="../../../js/vue/vue.js"></script>
<script src="../../../js/vue/axios.min.js"></script>


<style type="text/css">
.zth-container {
	margin-top: 20px;
	margin-left: 30%;
	padding-bottom: 50px;
	width: 350px;
	height: 680px;
}

.zth-container-but {
	text-align: center;
	margin-top: 20px;
	margin-left: 10px;
}

.layui-form-label {
	width: auto;
}

.sm{
	color:red;
}
</style>
</head>
<body>
	<div id="app">
		<div class="zth-container">
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">姓名</label>
				<div class="layui-input-block">
					<input type="text" name="title" lay-verify="title"
						autocomplete="off" v-model="name" placeholder="请输入姓名"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">聯繫方式</label>
				<div class="layui-input-block">
					<input type="text" lay-verify="title" autocomplete="off"
						v-model="phone" placeholder="请输入联系方式" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<div class="wrapper">
						<input type="radio" v-model="sex" name="sex" value="1"
							id="option-1"> <input type="radio" v-model="sex"
							name="sex" value="2" id="option-2"> <label for="option-1"
							class="option option-1">
							<div class="dot"></div> <span>男</span>
						</label> <label for="option-2" class="option option-2">
							<div class="dot"></div> <span>女</span>
						</label>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">年龄</label>
				<div class="layui-input-block">
					<input type="number" name="title" lay-verify="title"
						autocomplete="off" v-model="age" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">地址</label>
				<div class="layui-input-block">
					<input type="text" name="title" lay-verify="title"
						autocomplete="off" v-model="address" placeholder="请输入地址"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">身份证号</label>
				<div class="layui-input-block">
					<input type="text" name="title" lay-verify="title"
						autocomplete="off" v-model="identity" placeholder="请输入身份证号"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">职位</label>
				<div class="layui-input-block">
					<select v-model="spos_id" name="spos_id" lay-filter="aihao"
						style="width: 240px; height: 38px; border: 1px solid rgb(230, 230, 230);">
						<option value="0">请选择职务</option>
						<option v-for="ss in  sposs" :value="ss.spos_id">{{ss.position_name}}</option>

					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">班级</label>
				<div class="layui-input-block">
					<select v-model="grade_id" name="grade_id" lay-filter="aihao"
						style="width: 240px; height: 38px; border: 1px solid rgb(230, 230, 230);">
						<option value="0">请选择班级</option>
						<option v-for="ss in  grades" :value="ss.grade_id">{{ss.zname}}</option>

					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">账号</label>
				<div class="layui-input-block">
					<input type="text" name="title" lay-verify="title"
						autocomplete="off" v-model="username" placeholder="请输入账号"
						class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">头像（<span class="sm">必选</span>）</label>
				<div class="layui-input-block">
					<div class="layui-upload">
						<button type="button" class="layui-btn layui-btn-normal"
							id="test8">点击选择头像</button>
					</div>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label" style="width: auto;">密码</label>
				<div class="layui-input-block">
					<input type="password" name="title" lay-verify="title"
						autocomplete="off" v-model="password" placeholder="请输入密码"
						class="layui-input">
				</div>
			</div>

			<div class="layui-inline">
				<label class="layui-form-label">入学时间</label>
				<div class="layui-input-block">
				<div class="layui-input-inline">
					<input type="text" name="date" id="date" lay-verify="date" style="width: 240px"
						placeholder="请选择日期"  v-model="entry_time" autocomplete="off" class="layui-input">
				</div>
				</div>
			</div>

			<div class="zth-container-but">
				<button type="button" class="layui-btn" id="add">提交</button>
				<button type="button" class="layui-btn layui-btn-primary" id="close"
					onclick="close()">关闭</button>
			</div>
		</div>
	</div>
	<script src="../../../js/jquery.min.js"></script>
	<script type="text/javascript">
	
	var vm=new Vue({
		el:'#app',
		data(){
			return{
				name:'',//姓名
				grade_id:0,//班级id
				phone:'',//联系方式
				sex:1,//性别
				age:1,//年龄
				address:'',//地址
				identity:'',//身份证号
				spos_id:0,//学生职位id
				file_id:0,
				entry_time:'',//入学时间
				dimission_time:'',//离校时间
				
				username:'',//账号
				password:'',//密码
				
				sposs:[],//储存职位
				grades:[]//储存班级
			}
		},
		mounted:function(){
			this.sposShow();
			this.gradeShow();
		},
		methods:{
			add:function(){
				//特殊字符
				  var flag = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？ ]");
				//中文
				  var patrn=/[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/gi; 
				//英文  
				var p = /[a-z]/i;
				 if(
						this.name!=''&&!flag.test(this.name)&&
						this.grade_id!=0&&
						this.phone!=''&&!flag.test(this.phone)&&!patrn.exec(this.phone)&&!p.test(this.phone)&&
						this.age!=0&&
						this.file_id!=0&&
						this.address!=''&&!flag.test(this.address)&&
						this.identity!=''&&!flag.test(this.identity)&&!patrn.exec(this.identity)&&
						this.spos_id!=0&&
						this.username!=''&&!flag.test(this.username)&&!patrn.exec(this.username)&&
						this.password!=''&&!flag.test(this.password)
				){ 
					var params =new URLSearchParams();
					params.append('name',this.name);
					params.append('grade_id',this.grade_id);
					params.append('phone',this.phone);
					params.append('age',this.age);
					params.append('address',this.address);
					params.append('identity',this.identity);
					params.append('spos_id',this.spos_id);
					params.append('username',this.username);
					params.append('password',this.password);
					params.append('file_id',this.file_id);
					params.append('sex',this.sex);
					params.append('status',2);
					params.append('entry_time',$("#date").val());
					
					axios.post('/student/add',params).then(res=>{
						if(res.data>0){
							succeed();
						}else{
							layer.msg('失败！该账号有重复');
						}
						
					},err=>{
						console.log(err);
					})
				 }else{
					 layer.msg('你填写有误！');
				}  
				
			},
			//显示职务
			sposShow:function(){
				axios.get("/spos/findAll?limit=100").then(res=>{
					var o=res.data.list
					this.sposs=o;
				},err=>{
					console.log(err);
				});
			},
			//显示班级
			gradeShow:function(){
				axios.get("/grade/findAll?limit=100").then(res=>{
					var o=res.data.list
					this.grades=o;
				},err=>{
					console.log(err);
				});
			}
			
		}
	});
	//操作成功
	function succeed() {
		layui.use(['form', 'jquery'], function() {
			layer.alert("添加成功！", function() {
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				parent.layer.close(index);
				//关闭父级页面的表格
				parent.layui.table.reload('testReload');
			});
		});
	}
	
	//关闭
	layui.use(['form', 'jquery'], function() {
		var $=layui.jquery
	  $("#close").on('click',function(){
		layui.use(['form', 'jquery'], function() {
				var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
				parent.layer.close(index);
				//关闭父级页面的表格
				parent.layui.table.reload('testReload');
		});
	});
	
	});
	
	
	layui.use(['form', 'layedit', 'laydate','upload','jquery'], function(){
		  var form = layui.form
		  ,layer = layui.layer
		  ,layedit = layui.layedit
		  ,laydate = layui.laydate
		  ,upload = layui.upload
		  ,$=layui.jquery;
		  
		  //日期
		  laydate.render({
		    elem: '#date'
		  });
		  //选完文件后不自动上传
		  upload.render({
		    elem: '#test8'
		    ,url: '/file/upload' //改成您自己的上传接口
		    ,auto: false
		    //,multiple: true
		    ,bindAction: '#add'
		    ,done: function(res){
		    	if(res.data.file_id!=null){
		    		vm.file_id=res.data.file_id;
		    		vm.add();
		    	}else{
		    		 layer.msg('头像必选');
		    	}
		      //layer.msg('上传成功');
		    }
		  });
	});
	</script>
</body>
</html>